<template>
  <div
    class="swiper-wrap"
    @touchstart.passive="onTouchStart"
    @touchmove.prevent="onTouchMove"
    @touchend="onTouchEnd"
  >
    <ul class="swiper">
      <transition :name="smoothmove" v-for="(item, index) in imgs" :key="index">
        <li v-show="index == curIndex">
          <img :src="item" />
        </li>
      </transition>
    </ul>
    <div id="nextImg">
      <img :src="imgs[nextIndex]" />
    </div>
    <!-- 缩略点 -->
    <ul class="scalSmall">
      <li
        v-for="(item, index) in imgs"
        :key="index"
        :class="{ active: index == curIndex }"
      ></li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    imgs: Array,
    duration: {
      default: 3000,
      type: Number,
    },
  },
  data() {
    return {
      curIndex: 0,
      smoothmove: "slideleft",
      flag: false,
      interval: null,
      nextIndex: 1,
      startY: 0,
      endY: 0,
    };
  },
  computed: {},
  methods: {
    // 下一页
    next() {
      this.smoothmove = "slideleft";
      if (this.imgs.length > 2) {
        if (this.curIndex == this.imgs.length - 2) {
          this.nextIndex = 0;
          this.curIndex++;
        } else if (this.curIndex == this.imgs.length - 1) {
          this.curIndex = 0;
          this.nextIndex = this.curIndex + 1;
        } else {
          this.curIndex++;
          this.nextIndex = this.curIndex + 1;
        }
      } else {
        this.curIndex++;
        if (this.curIndex > 1) {
          this.curIndex = 0;
        }
        if (this.curIndex == 0) {
          this.nextIndex = 1;
        } else if (this.curIndex == 1) {
          this.nextIndex = 0;
        }
      }
    },
    // 上一页
    prev() {
      this.smoothmove = "slideright";
      if (this.curIndex == 0) {
        this.curIndex = this.imgs.length - 1;
        this.nextIndex = 0;
      } else {
        this.curIndex--;
        this.nextIndex = this.curIndex + 1;
      }
    },
    // 开始轮播
    start() {
      this.interval = setInterval(() => {
        this.next();
      }, this.duration);
    },
    // 暂停轮播
    stop() {
      clearInterval(this.interval);
    },
    onTouchStart(e) {
      this.stop();
      // 记录起始值
      this.startY = e.touches[0].clientY;
    },
    onTouchMove(e) {
      // 重复赋值，记录最后结束移动的值
      this.endY = e.touches[0].clientY;
    },
    onTouchEnd(e) {
      if (this.endY - this.startY > 20) {
        this.prev();
      } else if (this.endY - this.startY < -20) {
        this.next();
      }
      this.start();
    },
  },
  created() {
    this.nextIndex = this.curIndex + 1;
    this.start();
  },
};
</script>
<style scoped>
.swiper-wrap {
  width: 3.35rem;
  height: 1.2rem;
  position: relative;
  margin: 0.1rem auto 0;
}
.swiper {
  width: 100%;
  position: relative;
  height: 100%;
}
.swiper li {
  width: 100%;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: 0.15rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 99;
}
li img {
  width: 100%;
  display: block;
}
.slideleft-enter-from {
  transform: translateY(0.12rem) scale(0.9);
  opacity: 0.4;
}
.slideleft-enter-active,
.slideleft-leave-active {
  transition: all 0.4s;
}
.slideleft-leave-to {
  transform: translateY(-0.12rem) scale(0.9);
  opacity: 0.4;
}
.slideright-enter-from {
  transform: translateY(-0.12rem) scale(0.9);
}
.slideright-enter-active,
.slideright-leave-active {
  transition: all 0.4s;
}
.slideright-leave-to {
  transform: translateY(0.12rem) scale(0.9);
  opacity: 0;
}
.scalSmall {
  position: absolute;
  top: 0;
  right: 0.06rem;
  display: flex;
  flex-direction: column;
  width: 0.06rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  z-index: 199;
}
.scalSmall li {
  height: 0.04rem;
  width: 0.04rem;
  border-radius: 50%;
  flex: none;
  background-color: rgba(51, 51, 51, 0.8);
  cursor: pointer;
  margin: 0.03rem 0;
}
.scalSmall .active {
  background-color: rgba(255, 255, 255, 0.8);
}
button {
  font-size: 0.2rem;
}
#nextImg {
  position: absolute;
  top: 0.08rem;
  left: 0.12rem;
  width: 3.11rem;
  height: 1rem;
  overflow: hidden;
  border-radius: 00.15rem;
}
#nextImg img {
  width: 100%;
}
</style>
